<!-- 页面  -->
<template>
  <view>
    <view class="ss-flex flex-wrap">
      <view class="goods-box" v-for="item in pagination?.data" :key="item.id">
        <view @click="sheep.$router.go('/pages/goods/index', { id: item.id })">
          <view class="goods-img">
            <image class="goods-img" :src="sheep.$url.cdn(item.image)" mode="aspectFill"></image>
          </view>
          <view class="goods-content">
            <view class="goods-title ss-m-b-16 ss-line-1 ss-flex ss-col-center">
              <text class="title-tag" :style="{backgroundColor: getGoodsType(item.isxh).color}">{{ getGoodsType(item.isxh).name }}</text>
              <text>{{ item.title }}</text>
            </view>
            <view class="ss-flex ss-row-between">
              <view>
                <view class="goods-price">
                  <text class="price-unit-s">￥</text>
                  <text class="font-ali-bold">{{ item.price[0] }}</text>
                </view>
                <view class="goods-original ss-m-t-2 ss-m-l-4 font-ali-bold"> ￥{{ item.original_price }}</view>
              </view>
              <view class="add-btn" @tap.stop="addCarClick(item.id)">
                <image class="" src="/static/icon/add.png" mode=""></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 规格与数量弹框 -->
    <view class="detail-swiper-selector" v-if="state.goodsInfo.id">
      <s-select-sku
          :goodsInfo="state.goodsInfo" :show="state.showSelectSku" @addCart="onAddCart" @buy="onBuy"
          @change="onSkuChange" @close="state.showSelectSku = false" />
    </view>
  </view>
</template>

<script setup>
  import { reactive, computed,nextTick } from 'vue';
  import sheep from '@/sheep';
  const goodsType =computed(() => sheep.$store('goods').type);

  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    activeMenu: [Number, String],
    pagination: Object,
  });

  const state = reactive({
    showSelectSku: false,
    goodsInfo: {},
  });

  /**
   * @添加购物车
   */
  function addCarClick(id) {
    state.goodsInfo = {};
    // console.log(id, '添加购物车')
    sheep.$api.goods.detail(id).then((res) => {
      if (res.code === 1) {
        state.goodsInfo = res.data;
        // state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.images);
        // state.type = getGoodsType(state.goodsInfo.isxh);
        // state.goodsInfo.status = [{
        // 	title: state.type.name,
        // 	content: state.type.name + '商品'
        // }];
        // nextTick(() =>{
          state.showSelectSku = true
        // })
      } else {
        // 未找到商品
        state.goodsInfo = null;
      }
    });
  }
  // 规格变更
  function onSkuChange(e) {
    state.selectedSkuPrice = e;
  }

  // 添加购物车
  function onAddCart(e) {
    sheep.$store('cart').add(e);
    state.showSelectSku = false;
  }

  // 立即购买
  function onBuy(e) {
    sheep.$router.go('/pages/order/confirm', {
      data: JSON.stringify({
        order_type: 'goods',
        goods_list: [{
          goods_id: e.goods_id,
          goods_num: e.goods_num,
          goods_sku_price_id: e.id,
        }, ],
      }),
    });
    state.showSelectSku = false
  }

  function getGoodsType(id) {
    const type = sheep.$store('goods').type;
    return type.find((item) => item.id == id);
  }

</script>

<style lang="scss" scoped>
  .goods-box {
    width: calc((100% - 20rpx) / 2);
    margin-bottom: 20rpx;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

    .goods-img {
      width: 100%;
      height: 255rpx;
      border-radius: 10rpx 10rpx 0px 0px;
    }

    .goods-content {
      width: 100%;
      background: #ffffff;
      // box-shadow: 0px 0px 20rpx 4rpx rgba(199, 199, 199, 0.22);
      padding: 18rpx 2rpx 20rpx 10rpx;
      box-sizing: border-box;
      border-radius: 0 0 10rpx 10rpx;

      .goods-title {
        font-size: 27rpx;
        font-weight: bold;
        color: #333333;
        .title-tag{
          background: #5acd30;
          padding: 2rpx 4rpx;
          font-size: 18rpx;
          color: #fff;
          border-radius: 10rpx;
          vertical-align: middle;
          margin-right: 4rpx;
        }
        >text{
          vertical-align: middle;
        }
      }

      .goods-price {
        font-size: 32rpx;
        font-weight: 600;
        // color: #e1212b;
        color: #ee3f39;
        //font-family: Microsoft YaHei;
      }

      .goods-original{
        font-size: 24rpx;
        color: #999999;
        text-decoration: line-through;
      }

      .add-btn{
        width: 47rpx;
        height: 47rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
    }

    &:nth-child(2n + 1) {
      margin-right: 20rpx;
    }
  }
</style>
